<template>
    <div class="app-container" v-loading="loading">
        <el-form ref="editForm" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="文章标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入文章标题,20字左右" style="width: 800px"/>
            </el-form-item>
            <el-form-item label="标签" prop="tags">
                <el-input v-model="form.tags" placeholder="标签请使用,号分隔，20字左右" style="width: 800px"/>
            </el-form-item>
            <el-form-item label="宣传栏" prop="ifBanner">
                <el-radio v-model="ifBanner" label="Y">是</el-radio>
                <el-radio v-model="ifBanner" label="N">否</el-radio>
            </el-form-item>
            <el-form-item label="宣传栏图片" prop="ifBanner" v-if="ifBanner==='Y'">
                <el-upload
                        :action="uploadUrl"
                        list-type="picture-card"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :on-remove="handleRemove"
                        :file-list="imageList"
                        :on-success="handleSuccess">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="标题图片" prop="ifBanner">
                <el-upload
                        :action="uploadUrl"
                        list-type="picture-card"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :on-remove="handleRemove2"
                        :file-list="titleImageList"
                        :on-success="handleSuccess2">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

            <el-row>
                <h3>文章内容</h3>
            </el-row>

            <el-form-item
                    v-for="(domain, index) in paList"
                    :label="'段落' + domain.id"
                    :key="domain.key"
            >
                <el-input type="textarea" :rows="5" v-model="form[domain.id]" v-if="domain.type==='text'"></el-input>
                <el-upload v-else
                        :action="uploadUrl"
                        list-type="picture-card"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :on-remove="handleRemove2"
                        :file-list="paragraphImageList[domain.id]"
                        :on-success="handleSuccess3(response,domain.id)">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <!--<div :id="domain.id" style="width: 800px" v-if="domain.type==='text'"></div>-->
                <!--<el-button @click.prevent="removeDomain(domain)">删除</el-button>-->
            </el-form-item>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAddParagraph"
                    >新增段落</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAddImage"
                    >新增图片</el-button>
                </el-col>
            </el-row>

            <!--<el-form-item label="正文" prop="body">-->
                <!--<div id="body" style="width: 800px"></div>-->
            <!--</el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </div>
</template>

<script>
    import WangEdit from 'wangeditor';
    import {saveOrUpdate,get} from '@/api/article'
  export default {
    name: 'add',
    data() {
      return {
        id:'',
        loading: false,
        form: {},
        rules: {},
        editorContent:'',
        ifBanner:'N',
        uploadUrl:process.env.BASE_API + '/orderTruckImage/upload',
        baseUrl: process.env.IMG_BASE_URL,
        imageList:[],
        titleImageList:[],
        paId:1,
        paList:[
          { id:'index1',type:'text',key:Date.now()},
        ],
        editorContentList:[],
        paragraphImageList:[],
      }
    },
    methods: {
      handleAddParagraph(){
        this.paId = this.paId+1;
        let divId = 'index'+this.paId;
        this.paList.push({
          id:divId,type:'text',key:Date.now()
        });
        let divStr = '#'+divId;
        const editor = new WangEdit(String(divStr));
        editor.customConfig.uploadImgShowBase64 = true;
        editor.customConfig.onchange = html => {
          this.editorContentList[this.paId] = html;
        };
        editor.create();
      },
      handleAddImage(){
        this.paId = this.paId+1;
        let divId = 'index'+this.paId;
        this.paList.push({
          id:divId,type:'image',key:Date.now()
        });
      },
      submitForm(){
        let bannerUrl ='';
        let titleUrl = '';
        if(this.imageList&& this.imageList.length>0){
          bannerUrl = this.imageList[0].imageUrl;
        }
        if(this.titleImageList&& this.titleImageList.length>0){
          titleUrl = this.titleImageList[0].imageUrl;
        }
        let formData = {
          id:this.id,
          ...this.form,
          body:this.editorContent,
          ifBanner:this.ifBanner,
          bannerUrl,
          titleUrl
        };
        this.loading = true;
        saveOrUpdate(formData).then(resp=>{
          if(!resp.hasError){
            sessionStorage.removeItem('articleId');
            this.$message.success('操作成功！')
            this.$router.push('/article/index')
          }else{
            this.$message.error(resp.message)
          }
          this.loading = false;

        })
      },
      handleExceed() {
        this.$message.warning('最多上传1个文件！')
      },
      handleRemove(event) {
        const { url } = event
        let imgList = []
        this.imageList.forEach(voucher => {
          if (voucher.url !== url) {
            imgList.push(voucher)
          }
        })
        this.imageList = imgList
      },
      handleRemove2(event) {
        const { url } = event
        let imgList = []
        this.titleImageList.forEach(voucher => {
          if (voucher.url !== url) {
            imgList.push(voucher)
          }
        })
        this.titleImageList = imgList
      },
      handleSuccess(res) {
        let imgList = this.imageList
        imgList.push({ url: this.baseUrl + res.data, imageUrl: res.data,})
        this.imageList = imgList
      },
      handleSuccess2(res) {
        let imgList = this.titleImageList
        imgList.push({ url: this.baseUrl + res.data, imageUrl: res.data,})
        this.titleImageList = imgList
      },
      handleSuccess3(res,id){
        console.log(res);
        console.log(id);
        console.log(this.paragraphImageList)
      }
    },
    mounted() {
      var editor = new WangEdit('#index1');
      editor.customConfig.uploadImgShowBase64 = true;
      editor.customConfig.onchange = html => {
        this.editorContent = html;
      };
      editor.create();
      let articleId = sessionStorage.getItem('articleId');
      sessionStorage.removeItem('articleId');
      if(articleId){
        this.id = articleId;
        get(articleId).then(resp=>{
          this.form = resp.result;
          this.ifBanner = resp.result.ifBanner;
          if(resp.result.bannerUrl){
            let imgList = []
            imgList.push({ url: this.baseUrl + resp.result.bannerUrl, imageUrl: resp.result.bannerUrl,})
            this.imageList = imgList
          }
          if(resp.result.titleUrl){
            let imgList2 = []
            imgList2.push({ url: this.baseUrl + resp.result.titleUrl, imageUrl: resp.result.titleUrl,})
            this.titleImageList = imgList2
          }
          editor.txt.html(resp.result.body);
        })
      }
    }
  }
</script>

<style scoped>

</style>
